<template>
  <div class="user_info">
    <!--未登录-->
    <template v-if="true">
      <div class="headImg">
        <img src="@/assets/logo.png" alt="sds" />
      </div>
      <div class="loding">
        登录/注册
        <span>博册与你同行</span>
      </div>
      <router-link to="/user/login">
        <svg class="you_icon icon" aria-hidden="true">
          <use xlink:href="#icon-you"></use>
        </svg>
      </router-link>
    </template>
    <!--已登录-->
    <template v-else>
      <!-- 顶部navbar -->
      <UserTitleNavbar />
      <!--left头像-->
      <div class="headImg">
        <img
          :src="store.state.user.profile.user_image"
          alt="sds"
          @click="headShow = true"
          v-if="store.state.user.profile.user_image != 'null'"
        />
        <svg
          class="head_icon"
          aria-hidden="true"
          @click="headShow = true"
          v-else
        >
          <use xlink:href="#icon-tianjiatouxiang"></use>
        </svg>
        <van-overlay :show="headShow">
          <div class="wrapper" @click="headShow = false">
            <!--图片-->
            <img :src="store.state.user.profile.user_image" alt="sds" />
            <!--替换图片-->
            <van-uploader
              class="add_head_box"
              @click.stop
              :after-read="afterRead"
            >
              <svg class="add_head_icon" aria-hidden="true">
                <use xlink:href="#icon-tihuantouxiang"></use>
              </svg>
            </van-uploader>
          </div>
        </van-overlay>
      </div>
      <!--right资料-->
      <div class="userInfo">
        <div class="user_name">
          <span class="info-name">
            {{ userInfo.user_name ? "录灵" : "录灵" }}
            <!-- <svg class="nannv_icon" aria-hidden="true">
              <use
                :xlink:href="
                  userInfo.user_sex == '女' ? '#icon-nannv' : '#icon-nannv-copy'
                "
              ></use>
            </svg> -->
            <svg class="icon nannv_icon" aria-hidden="true">
              <use xlink:href="#icon-nannv-copy"></use>
            </svg>
          </span>
        </div>
        <div class="user_intro">
          <span>博册号:</span>
          <p>
            {{ userInfo.user_intro ? `${userInfo.user_intro}` : "暂无介绍" }}
          </p>
        </div>
      </div>
      <!--编辑-->
      <div class="use_dan">
        <svg class="xiangyou2_icon icon" aria-hidden="true">
          <use xlink:href="#icon-zhixiangyou"></use>
        </svg>
      </div>
    </template>
  </div>
</template>

<script>
import UserTitleNavbar from "./UserTitleNavbar.vue";
import { useStore } from "vuex";
import { ref } from "vue";
import { alterUserAvatar, postAvatar } from "../../../api/user";
import { Toast } from "vant";

export default {
  name: "UserInfo",
  components: { UserTitleNavbar },
  setup() {
    const store = useStore();
    //头像预览框状态
    const headShow = ref(false);
    //用户信息
    const userInfo = ref(store.state.user.profile);
    //上传头像
    const afterRead = (file) => {
      // 此时可以自行将文件上传至服务器
      const formdata = new FormData();
      formdata.append("file", file.file);
      // console.log(file);
      postAvatar(formdata).then((res) => {
        // console.log(res);
        let data = {
          user_id: store.state.user.profile.user_id,
          user_image: res.data.filename,
        };
        if (res.status == 200) {
          // console.log(11);
          alterUserAvatar(data).then((res) => {
            console.log(res);
            if (res.status == 200) {
              store.commit("user/setUser", { user_image: res.data });
              Toast("头像修改成功");
            }
          });
          //  关闭头像预览框
          headShow.value = false;
        }
      });
    };
    //退出登录
    const backLogin = () => {
      store.commit("user/setUser", { token: "" });
      location.reload();
    };
    return { userInfo, store, headShow, afterRead, backLogin };
  },
};
</script>

<style scoped lang="less">
.icon {
  width: 1.5rem;
  height: 1.5rem;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
.you_icon {
  width: 2.5rem;
  height: 2.5rem;
  color: #949494;
  margin-bottom: 7rem;
  margin-right: 1rem;
}
.head_icon {
  width: 100%;
  height: 100%;
  margin-top: 50%;
  transform: translateY(-50%);
  overflow: hidden;
  vertical-align: -0.2em;
  fill: currentColor;
}
.add_head_icon {
  width: 4em;
  height: 4em;
  vertical-align: -0.2em;
  fill: currentColor;
}
.nannv_icon {
  position: absolute;
  top: -0.5rem;
  right: -1.5rem;
  width: 1em;
  height: 1em;
  vertical-align: -0.2em;
  fill: currentColor;
}
.xiangyou2_icon {
  color: #c08831;
}
.user_info {
  flex: none;
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #ffa6002e;
  background-image: url("https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fbpic.51yuansu.com%2Fpic3%2Fcover%2F01%2F23%2F24%2F592255b38f95b_610.jpg&refer=http%3A%2F%2Fbpic.51yuansu.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1659234423&t=99c458b6667f4704555fdae9797cd03a");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  height: 12rem;
  padding: 0 1.2rem;
  box-sizing: border-box;
  .headImg {
    width: 4.6rem;
    height: 4.6rem;
    border-radius: 50%;
    //text-align: center;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #c8c9cc;
    img {
      width: 100%;
      //margin-top: 50%;
      //transform: translateY(-50%);
    }
  }
  .loding {
    position: relative;
    font-size: 1.5rem;
    color: #969799;
    text-shadow: 2px 1px #c8c9cc;
    margin-bottom: 2rem;
    span {
      position: absolute;
      color: #ff551f;
      font-size: 0.8rem;
      bottom: -1.5rem;
      left: 0;
      text-shadow: none;
    }
  }
  .userInfo {
    width: 60%;
    .info-name {
      position: relative;
      font-size: 1.3rem;
      font-weight: 600;
      color: #000;
    }
    .user_intro {
      display: flex;
      padding-right: 1rem;

      box-sizing: border-box;
      span {
        white-space: nowrap;
        font-size: 0.8rem;
        color: #ed6a0ce0;
      }
      p {
        margin: 0;
        font-size: 0.8rem;
        color: #545559;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }
    .user_atte {
      margin-top: 0.2rem;
      .info-atte {
        color: #795f80;
        i {
          color: #e27070db;
        }
      }
    }
  }
  .use_dan {
    position: absolute;
    top: 5rem;
    right: 2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
}
.wrapper {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  .add_head_box {
    position: absolute;
    top: 2rem;
    right: 2rem;
  }
}
</style>
